<template>
  <div class="pay-panel-content">
    <van-popup v-model="show"
               position="bottom"
               class="pay-panel">
      <div class="tips">请输入六位支付密码</div>

      <!-- 密码输入框 -->
      <van-password-input :value="password"
                          @focus="true" />

      <!-- 忘记密码 -->
      <router-link class="goPayPwdSet"
                   :to="{name: 'PublicUserPayPassWordSetting'}">忘记密码？</router-link>

      <!-- 数字键盘 -->
      <van-number-keyboard :show="true"
                           extra-key=""
                           @input="onInput"
                           @delete="onDelete" />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'PayPanel',
  data() {
    return {
      show: false, // 组件内是否显示的控制，和vant的mask一起判断
      password: ''
    }
  },
  created() {
    this.show = this.showPanel
  },
  watch: {
    /**
     * 监听组件内的状态修改
     * 然后触发父页面的状态修改
     */
    show(newVal, oldVal) {
      this.$emit('clickMask', newVal)
    },
    /**
     * 父组件传递过来的值改变
     * 联动组件内的show进行显示
     */
    showPanel(newVal, oldVal) {
      this.show = newVal
    },
    password(psw) {
      if (psw.length === 6) {
        this.$emit('pswCallback', psw)
        this.show = false
        this.password = ''
      }
    }
  },
  props: {
    /**
     * 是否显示密码框
     */
    showPanel: {
      type: Boolean,
      default: false
    }
  },
  /**
   * v-model绑定对应的方法，和修改的方法
   */
  model: {
    prop: 'showPanel',
    event: 'clickMask'
  },
  methods: {
    // 输入密码
    onInput(value) {
      if (this.password.length < 6) {
        this.password += value
      }
    },
    // 删除密码
    onDelete() {
      let psw = this.password.split('')
      psw.shift()
      this.password = psw.join('')
    }
  }
}
</script>

<style lang="scss">
.pay-panel-content {
  .pay-panel {
    padding-top: 20px;
  }
  .pay-panel .tips {
    width: 100%;
    font-size: 16px;
    color: #333333;
    text-align: center;
    margin-bottom: 20px;
  }
  .pay-panel /deep/ .van-number-keyboard {
    position: static;
  }

  .forgetPwd {
    padding-right: 0.2rem;
    padding-top: 0.2rem;
    display: block;
    font-size: 0.28rem;
    color: #999;
    text-align: right;
  }

  .goPayPwdSet {
    padding: 20px 10px 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 14px;
    color: #999;
  }
}
</style>
